<template>
    <div class="tab">
      <ul>
        <li v-for="(item, index) in listItem" :key="index" @click="changeComponents(item)">{{item}}</li>
      </ul>
      <component :is="components"></component>
    </div>
</template>

<script>
export default {
  data () {
    return {
      components: 'A',
      listItem: ['A', 'B', 'C']
    }
  },
  components: {
    A: {
      template: `<h1>A</h1>`
    },
    B: {
      template: `<h1>B</h1>`
    },
    C: {
      template: `<h1>C</h1>`
    }
  },
  methods: {
    changeComponents (item) {
      this.components = item
    }
  }
}
</script>

<style lang="less" scoped>
.tab {
  ul {
    overflow: hidden;
    li {
      float: left;
      width: 100px;
      height: 40px;
      list-style: none;
      cursor: pointer;
      background: #409EFF;
    }
  }
}
</style>
